<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        form {
            counter-reset: count 0; /* 初始化count 0 */
        }
        form input[type=checkbox]:checked{
            counter-increment: count 1;  /* 当选中复选框时，将count加1 */
        }

        form .selected::after {
            content: counter(count) '个';  /* 使用counter函数将最终结果显示 */
        }
    </style>
</head>
<body>
<form action="#">
    <div class="checkbox-item">
        <input type="checkbox" id="one">
        <label for="one">one</label>
    </div>
    <div class="checkbox-item">
        <input type="checkbox" id="two">
        <label for="two">two</label>
    </div>
    <div class="checkbox-item">
        <input type="checkbox" id="three">
        <label for="three">three</label>
    </div>
    <div class="selected">已选择了：</div>
</form>
</body>
</html>